<template>
  <div class="app-main-container">
    <div class="warnningTip"><i class="el-icon-warning-outline" /> 在进行场区场地配置前，请先完成运动项目配置</div>
    <!-- <div class="tabs-cate">
      <div class="item">
        <span class="text">分类一</span>
      </div>
      <div class="item active">
        <span class="text">分类二</span>
      </div>
    </div> -->
    <!-- 场区列表 -->
    <div class="area-space-box">
      <div class="box-item area">
        <div class="header-wrap">
          <div class="input-wrap">
            <el-input v-model="areaName" placeholder="搜索场区" />
            <i class="el-icon-search icon" @click="toGetAreaList(1)" />
          </div>
          <el-button v-if="meta.indexOf('AreaVenueAdd') > -1" v-preventReClick type="primary" size="small" @click="toAddArea">
            <i class="el-icon-plus" /> 新增场区
          </el-button>
        </div>
        <h3>{{ title }}</h3>
        <div v-for="item in areaListData" :key="item.id" :class="activeCheckArea.id === item.id ? 'area-item active' : 'area-item'" @click="showThisSpace(item)">
          <div class="flex-cb title-buttons">
            <div class="title">{{ item.areaName }}<template v-if="item.placeCount != 0">（{{ item.placeCount }}）</template>
            </div>
            <el-popover
              placement="bottom"
              width="120"
              trigger="hover"
            >
              <div class="el-pop-btns">
                <div v-if="meta.indexOf('AreaVenueSitAdd') > -1" v-preventReClick class="btn" @click.stop="toAddSpace(item)">新增</div>
                <div v-if="meta.indexOf('AreaVenueEdit') > -1" v-preventReClick class="btn" @click.stop="toEditArea(item)">编辑</div>
                <div v-if="meta.indexOf('AreaVenueDel') > -1" v-preventReClick class="btn" @click.stop="toDeleteArea(item.id)">删除</div>
              </div>
              <span slot="reference" style="color:#666666;">操作</span>
            </el-popover>
          </div>
          <div class="area-info">
            <div v-if="!item.freeDayStart&&!item.freeDayEnd&&!item.dateInfo&&!item.freeTimeStart&&!item.freeTimeEnd" />
            <template v-else>
              <div class="info-item label">
                <i color="red" class="el-icon-circle-check" />
                <span>免费开放时间</span>
              </div>
            </template>
            <div class="info-item">
              <div class="label">关联项目：</div>
              <div v-if="item.projectNames" class="value">
                <div v-for="pro,index in item.projectNamesArr" :key="pro.id" class="pro-name">
                  <span v-if="index != 0">|</span>
                  {{ pro }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <Paginations
          :total="areaTotal"
          :page-size="pagination.rows"
          :page="pagination.page"
          :integrated="integrated"
          @current-change="toGetAreaList"
          @SizeChange="handleSizeChangez"
        />
      </div>
      <!-- 场地列表 -->
      <div class="box-item space">
        <div class="space-header">
          <h3 class="title">场地列表</h3>
          <div class="times">免费开放时间：
            <span v-if="!activeCheckArea.freeDayStart&&!activeCheckArea.freeDayEnd&&!activeCheckArea.dateInfo&&!activeCheckArea.freeTimeStart&&!activeCheckArea.freeTimeEnd">无</span>
            <span v-if="activeCheckArea.freeDayStart&&activeCheckArea.freeDayEnd">{{ activeCheckArea.freeDayStart + '-' + activeCheckArea.freeDayEnd + '，' }}</span>
            <span v-if="activeCheckArea.dateInfo">{{ activeCheckArea.dateInfo + '，' }}</span>
            <span v-if="activeCheckArea.freeTimeStart&&activeCheckArea.freeTimeEnd">{{ activeCheckArea.freeTimeStart + '-' + activeCheckArea.freeTimeEnd }}</span>
          </div>
          <div>
            <el-button v-if="meta.indexOf('AreaVenueAdd') > -1" v-preventReClick type="primary" @click="toAddSpace()">
              <i class="el-icon-plus" /> 新增场地
            </el-button></div>
        </div>
        <el-table
          ref="table"
          :header-row-class-name="'table-header'"
          class="doumee-element-table mt10"
          border
          :data="spaceListData"
        >
          <el-table-column align="center" label="场地图片" width="140">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.imgAllPath"
                fit="contain"
                :src="scope.row.imgAllPath"
                :preview-src-list="[scope.row.imgAllPath]"
              />
              <img v-else style="width:80px;height:40px" src="../../../assets/images/default_space.png" alt="">
            </template>
          </el-table-column>
          <el-table-column align="center" prop="siteName" show-overflow-tooltip label="场地名称" min-width="140" />
          <el-table-column align="center" prop="projectName" label="关联项目" min-width="140" show-overflow-tooltip />
          <el-table-column align="center" prop="sort" label="排序码" min-width="140" />
          <el-table-column
            fixed="right"
            label="操作"
            min-width="120"
            align="center"
          ><template slot-scope="scope">
            <div class="flex-cc">
              <el-button
                type="text"
                size="small"
                @click="toEditSpace(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="small"
                class="secondColor"
                @click.native.prevent="toDeleteSpace(scope.row.id)"
              >
                删除
              </el-button>
            </div>
          </template></el-table-column>
        </el-table>
        <!-- <div class="flex-cc doumee-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="spaceTotal"
            :current-page.sync="spacePagination.page"
            :page-size="10"
            hide-on-single-page
            @current-change="getSpaceList"
          />
        </div> -->
        <Paginations
          :total="spaceTotal"
          :page="spacePagination.page"
          @current-change="getSpaceList"
          @SizeChange="handleSizeChange"
        />
      </div>
    </div>
    <!-- 新增/编辑场区 -->
    <el-dialog
      :title="areaAddEdit ? '编辑场区' : '新增场区'"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showAddArea"
      @closed="cancelAddEditArea"
    >
      <el-form ref="areaForm" :rules="rules" :model="addAreaForm" label-width="100px">
        <el-form-item label="场区名称" prop="areaName">
          <el-input v-model="addAreaForm.areaName" placeholder="输入场区名称" />
        </el-form-item>
        <el-form-item label="免费开放时间" prop="date">
          <el-date-picker
            v-model="addAreaForm.date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            :picker-options="pickerOptions"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <div class="check-box">
            <el-checkbox-group v-model="addAreaForm.dayType">
              <el-checkbox v-for="item in checkboxList" :key="item.id" :label="item.id">
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <el-time-picker
            v-model="addAreaForm.time"
            is-range
            value-format="HH:mm"
            :default-value="[new Date('2000-01-01 08:00:00'), new Date('2000-01-01 10:00:00')]"
            range-separator="至"
            start-placeholder="开始时刻"
            end-placeholder="结束时刻"
          />
        </el-form-item>
        <!-- <el-form-item label="营业时间" prop="openTime">
          <el-time-picker
            v-model="addAreaForm.openTime"
            is-range
            value-format="HH:mm"
            range-separator="至"
            start-placeholder="开始时刻"
            end-placeholder="结束时刻"
          />
        </el-form-item>
        <el-form-item label="客服电话" prop="phone">
          <el-input
            v-model="addAreaForm.phone"
            placeholder="输入客服电话"
          />
        </el-form-item>
        <el-form-item label="场区服务" prop="facilities">
          <el-checkbox-group v-model="facilities">
            <el-checkbox
              v-for="item in facilitys"
              :key="item.id"
              :label="item.id"
            >{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="场区地址" prop="address">
          <div class="time-inline">
            <el-input
              v-model="addAreaForm.address"
              class="item"
              placeholder="场区地址"
            />
          </div>
        </el-form-item> -->
        <el-form-item label="场区图片" prop="imgUrlAll">
          <transition name="fade">
            <Cropper
              v-if="dialogCropperVisible"
              :option-img="optionImg"
              :fileinfo="fileinfo"
              use-type="VENUE_IMG"
              :fixed-number="[32, 32]"
              @formSubmit="cropperSubmit"
              @formClose="cropperClose"
            />
          </transition>
          <el-upload
            class="device-uploader"
            :action="uploadFileUrl"
            :data="uploadData"
            :auto-upload="false"
            :show-file-list="false"
            accept=".pdf,.jpg,.png"
            :on-change="addFileChange"
          >
            <i class="el-icon-plus uploader-icon" />
            <div
              v-show="addAreaForm.imgUrlAll"
              class="file"
              :style="'background-image: url(' + addAreaForm.imgUrlAll + ')'"
            >
              <div class="delete">
                <i class="el-icon-delete icon" @click.stop="deleteYyzzImage" />
              </div>
            </div>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="场区定位" prop="positioning">
          <el-input
            v-model="addAreaForm.positioning"
            class="item"
            type="text"
            label="凤凰国际广场"
            disabled
          />
          <span class="item" style="color: #666666">经度：</span>
          <span class="item" style="color: #222222">{{ longitude }}</span>
          <span class="item" style="color: #666666">纬度：</span>
          <span class="item" style="color: #222222">{{ latitude }}</span>
        </el-form-item>
        <el-form-item>
          <div class="form-line" />
        </el-form-item>
        <el-form-item>
          <mapDrag class="mapbox" @center="getCenter" />
        </el-form-item> -->
        <el-form-item v-if="areaAddEdit" label="排序码" prop="sort">
          <el-input
            v-model="addAreaForm.sort"
            placeholder="输入排序码"
          />
        </el-form-item>
        <!-- <el-form-item label="场区介绍" prop="describe">
          <el-input
            v-model="addAreaForm.describe"
            :rows="5"
            type="textarea"
            maxlength="400"
            placeholder="请输入场区介绍"
          />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddEditArea">取消</el-button>
        <el-button v-preventReClick :loading="areaSubLoading" type="primary" @click="submitForm('areaForm')">确定</el-button>
      </div>
    </el-dialog>

    <!-- 新增/编辑场地 -->
    <el-dialog :title="spaceAddEdit ? '编辑场地' : '新增场地'" :visible.sync="showAddSpace" destroy-on-close width="600px" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog" @closed="cancelAddEditSpace">
      <el-form ref="spaceForm" :rules="rules" :model="addSpaceForm" label-width="100px">
        <el-form-item label="场地名称" prop="siteName">
          <el-input v-model="addSpaceForm.siteName" placeholder="输入场地名称" />
        </el-form-item>
        <el-form-item label="关联项目" prop="projectId">
          <el-select v-model="addSpaceForm.projectId" style="width:100%" value-key="id" placeholder="选择项目" :disabled="spaceAddEdit">
            <el-option
              v-for="item in projectListData"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="spaceAddEdit" label="排序码" prop="sort">
          <el-input
            v-model="addSpaceForm.sort"
            placeholder="输入排序码"
          />
        </el-form-item>
        <el-form-item label="场地图片" prop="showPic">
          <transition name="fade">
            <Cropper
              v-if="dialogCropperVisible2"
              :option-img="optionImg2"
              :fileinfo="fileinfo2"
              use-type="VENUE_IMG"
              :fixed-number="[16, 9]"
              @formSubmit="cropperSubmit2"
              @formClose="cropperClose2"
            />
          </transition>
          <div class="upload-wrap">
            <el-upload
              :action="uploadFileUrl"
              accept=".jpg,.png,.jpeg"
              :on-change="addFileChange2"
              :show-file-list="false"
              :auto-upload="false"
              :data="uploadData"
              class="device-uploader"
            >
              <i class="el-icon-plus uploader-icon" />
              <div
                v-if="addSpaceForm.showPic"
                class="file"
                :style="'background-image: url(' + addSpaceForm.showPic + ')'"
              >
                <div class="delete">
                  <i
                    class="el-icon-delete icon"
                    @click.stop="deleteDeviceConfigAddImage"
                  />
                </div>
              </div>
            </el-upload>
            <div class="placeholader tip-style">
              <div>建议尺寸：220px*64px</div>
              <div>支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情</div>
            </div>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddEditSpace">取消</el-button>
        <el-button v-preventReClick :loading="spaceSubLoading" type="primary" @click="submitForm('spaceForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import { parseTime } from '@/utils/index'
// import MapDrag from '@/components/Map/mapDrag.vue'
import Cropper from '@/components/cropper'
// import DhArea from '@/components/DhArea'
import store from '@/store'
import { getAreaList, addArea, getAreaDetail, editArea, deleteArea, spaceList, addSpace, editSpace, deleteSpace, getProjectList, uploadFile, allConfigList } from '@/api'
import { shortcuts } from '@/utils/config'
export default {
  name: 'AreaVenue',
  components: { Cropper },
  data() {
    return {
      pickerOptions: {
        shortcuts,
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      initFlag: true,
      modalDialog: store.getters.dialog,
      default_space: '../../../assets/images/default_space.png',
      areaSubLoading: false,
      spaceSubLoading: false,
      title: sessionStorage.getItem('name') || '场馆端后台管理系统',
      dialogCropperVisible: false,
      optionImg: '',
      files: {},
      fileinfo: {},
      dialogCropperVisible2: false,
      optionImg2: '',
      files2: {},
      fileinfo2: {},
      integrated: false,
      areaName: '',
      uploadFileUrl: uploadFile,
      uploadData: {
        folder: 'VENUE_IMG',
        type: ''
      },
      venueId: sessionStorage.getItem('venueId'),
      areaListData: [],
      activeArea: {},
      spaceListData: [],
      pagination: {
        page: 1,
        rows: 5
      },
      facilitys: [],
      areaTotal: 0,
      spacePagination: {
        page: 1,
        rows: 10
        // firstQueryTime: parseTime(new Date())
      },
      spaceTotal: 0,
      activeCheckArea: {},
      areaAddEdit: 0,
      spaceAddEdit: false,
      showAddArea: false,
      facilities: [],
      addAreaForm: {
        areaName: '',
        describe: '',
        lal: '',
        positioning: '',
        address: '',
        phone: '',
        imgUrlAll: '',
        imgUrl: '',
        date: [],
        time: '',
        openTime: '',
        dayType: []
      },
      checkboxList: [
        { id: '1', name: '星期一', checked: false },
        { id: '2', name: '星期二', checked: false },
        { id: '3', name: '星期三', checked: false },
        { id: '4', name: '星期四', checked: false },
        { id: '5', name: '星期五', checked: false },
        { id: '6', name: '星期六', checked: false },
        { id: '7', name: '星期日', checked: false },
        { id: '8', name: '节假日', checked: false }
      ],
      projectListData: [],
      halfSpaceList: [],
      showAddSpace: false,
      addSpaceForm: {
        siteName: '',
        projectId: '',
        pic: '',
        showPic: ''
      },
      meta: [],
      rules: {
        siteName: [{ required: true, message: '输入场地名称', trigger: 'blur' }],
        areaName: [{ required: true, message: '输入场区名称', trigger: 'blur' }],
        projectId: [{ required: true, message: '请选择关联项目', trigger: 'change' }],
        // showPic: [{ required: true, message: '请上传场地图片', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序码', trigger: 'blur' }]
      }
    }
  },
  computed: {
    latitude() {
      return this.addAreaForm.lal
        ? this.addAreaForm.lal.split(',')[0]
        : ''
    },
    longitude() {
      return this.addAreaForm.lal
        ? this.addAreaForm.lal.split(',')[1]
        : ''
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.toGetAreaList(1)
    this.toGetProjectList()
    allConfigList({ param: { type: '3' }})
      .then(res => {
        if (res.errorCode === '000000') {
          // console.log(res);
          this.facilitys = res.recordList
        }
      })
      .catch(err => {
        console.log(err)
      })
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    querycq() {
      console.log('---')
    },
    // 上传营业执照成功
    yyzzUploadSuccess(res, file, fileList) {
      if (res.success) {
        this.$set(this.addAreaForm, 'imgUrlAll', res.showUrl)
        this.$set(this.addAreaForm, 'imgUrl', res.insertUrl)
      } else {
        this.$message.error(res.msg || '上传失败')
      }
    },
    // 上传图片，开始裁剪
    async addFileChange(file) {
      // 上传，拿到file文件
      this.files = file.raw
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.addAreaForm, 'imgUrlAll', config.showUrl)
        this.$set(this.addAreaForm, 'imgUrl', config.insertUrl)
        this.dialogCropperVisible = false
      } else {
        this.dialogCropperVisible = false
        this.$message.error(config.msg || '上传失败')
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    // 上传图片，开始裁剪
    async addFileChange2(file) {
      // 上传，拿到file文件
      // this.files = file.raw
      this.$nextTick(() => {
        this.optionImg2 = URL.createObjectURL(file.raw)
        this.fileinfo2 = file.raw
        this.dialogCropperVisible2 = true
      })
    },
    // 裁剪确定按钮
    cropperSubmit2(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.addSpaceForm, 'pic', config.insertUrl)
        this.$set(this.addSpaceForm, 'showPic', config.showUrl)
        this.dialogCropperVisible2 = false
      } else {
        this.dialogCropperVisible2 = false
        this.$message.error(config.msg || '上传失败')
      }
    },
    deleteDeviceConfigAddImage() {
      this.$set(this.addSpaceForm, 'pic', '')
      this.$set(this.addSpaceForm, 'showPic', '')
    },
    // 裁剪取消
    cropperClose2() {
      this.dialogCropperVisible2 = false
    },
    // 删除已上传营业执照
    deleteYyzzImage() {
      this.$set(this.addAreaForm, 'imgUrlAll', '')
      this.$set(this.addAreaForm, 'imgUrl', '')
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName === 'spaceForm') {
            that.confirmAddSpace()
          } else {
            that.confirmAddArea()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取项目列表
    toGetProjectList() {
      const { venueId } = this
      getProjectList({ param: { venueId, status: '1' }}).then(res => {
        this.projectListData = res.recordList
      })
    },
    handleSizeChangez(val) {
      this.pagination.rows = val
      this.toGetAreaList(1)
    },
    // 获取场区列表
    toGetAreaList(page) {
      const { pagination, venueId, areaName } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      getAreaList({ pagination, param: { venueId, areaName }}).then(res => {
        for (let i = 0; i < res.recordList.length; i++) {
          if (res.recordList[i].projectNames) {
            res.recordList[i].projectNamesArr = res.recordList[i].projectNames.split('/')
          } else {
            res.recordList[i].projectNamesArr = []
          }
        }
        this.areaListData = res.recordList
        if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
          this.toGetAreaList(Math.ceil(res.totalCount / pagination.rows))
        }
        if (res.recordList.length > 0) {
          if (this.initFlag) {
            this.activeCheckArea = res.recordList[0]
            this.initFlag = false
          }
          this.getSpaceList(1)
        }
        this.areaTotal = res.totalCount
        this.spaceTotal = 0
      })
    },
    // 新增场区
    toAddArea() {
      this.areaAddEdit = 0
      this.showAddArea = true
    },
    // 编辑场区
    toEditArea(area) {
      // console.log(area);
      getAreaDetail({ param: { id: area.id }})
        .then(res => {
          // console.log(res);
          if (res.errorCode === '000000') {
            const { record: data } = res
            // this.addAreaForm.positioning = this.addAreaForm.position
            // this.addAreaForm.time = [data.freeTimeStart, data.freeTimeEnd]
            this.facilities = data.facilities.split(',')
            this.addAreaForm = {
              ...data,
              time: [data.freeTimeStart, data.freeTimeEnd],
              openTime: [data.openStart ?? '', data.openEnd ?? ''],
              positioning: data.position,
              dayType: data.dateType.split(',')
            }
            if (data.freeDayStart && data.freeDayEnd) {
              this.$set(this.addAreaForm, 'date', [data.freeDayStart, data.freeDayEnd])
            }
            // console.log(this.addAreaForm);
          }
        })
      // area = JSON.stringify(area)
      // area = JSON.parse(area)
      // area.date = [area.freeDayStart, area.freeDayEnd]
      // area.time = [area.freeTimeStart, area.freeTimeEnd]
      // for (let i = 0; i < checkboxList.length; i++) {
      //   if (area.dateType.includes(checkboxList[i].id)) {
      //     checkboxList[i].checked = true
      //   }
      // }
      // area.checkboxList = checkboxList
      // this.addAreaForm = area
      // if (area.freeDayStart && area.freeDayEnd) {
      //   this.$set(this.addAreaForm, 'date', [area.freeDayStart, area.freeDayEnd])
      // }
      this.areaAddEdit = 1
      this.showAddArea = true
    },
    // 取消新增/编辑场区
    cancelAddEditArea() {
      this.showAddArea = false
      this.$refs.areaForm.resetFields()
      this.addAreaForm.openTime = []
      this.addAreaForm.dayType = []
      this.addAreaForm.time = ''
      this.facilities = []
      this.addAreaForm.lal = ''
    },
    // 确认新增/编辑场区
    confirmAddArea() {
      const that = this
      const { addAreaForm, areaAddEdit, venueId } = this
      const param = {
        areaName: addAreaForm.areaName,
        dayType: []
      }
      addAreaForm.dayType = addAreaForm.dayType.filter((item) => item !== '')
      if (addAreaForm.date) {
        param.freeDayStart = addAreaForm.date[0]
        param.freeDayEnd = addAreaForm.date[1]
      } else {
        param.freeDayStart = ''
        param.freeDayEnd = ''
      }
      if (addAreaForm.time) {
        param.freeTimeStart = addAreaForm.time[0]
        param.freeTimeEnd = addAreaForm.time[1]
      } else {
        param.freeTimeStart = ''
        param.freeTimeEnd = ''
      }
      if (addAreaForm.openTime) {
        param.openStart = addAreaForm.openTime[0]
        param.openEnd = addAreaForm.openTime[1]
      } else {
        param.openStart = ''
        param.openEnd = ''
      }
      // debugger
      param.dayType = addAreaForm.dayType.join(',')
      param.sort = addAreaForm.sort
      param.imgUrl = addAreaForm.imgUrl
      param.facilities = this.facilities.join(',')
      param.phone = addAreaForm.phone
      param.address = addAreaForm.address
      param.positioning = addAreaForm.positioning
      param.lal = addAreaForm.lal
      param.describe = addAreaForm.describe
      this.areaSubLoading = true
      if (areaAddEdit) {
        // 编辑
        param.id = this.addAreaForm.id
        editArea({ param }).then(res => {
          that.areaSubLoading = false
          if (res.errorCode === '000000') {
            this.$message.success('编辑成功')
            this.showAddArea = false
            this.toGetAreaList()
            this.addAreaForm = {
              areaName: '',
              date: [],
              time: '',
              dayType: []
            }
          }
        }, () => {
          that.areaSubLoading = false
        })
      } else {
        // 新增
        param.venueId = venueId
        addArea({ param }).then(res => {
          that.areaSubLoading = false
          if (res.errorCode === '000000') {
            this.$message.success('新增成功')
            this.showAddArea = false
            this.toGetAreaList()
            this.addAreaForm = {
              areaName: '',
              date: [],
              time: '',
              dayType: []
            }
          }
        }, () => {
          that.areaSubLoading = false
        })
      }
    },
    // 删除场区
    toDeleteArea(id) {
      this.$confirm('此操作将删除该场区, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteArea({ param: { id }}).then(res => {
          if (res.errorCode === '000000') {
            this.$message.success('删除成功')
            this.spaceListData = []
            this.toGetAreaList()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 展示某场区的场地
    showThisSpace(area) {
      this.activeCheckArea = area
      this.getSpaceList(1)
    },
    handleSizeChange(val) {
      this.spacePagination.rows = val
      this.getSpaceList(1)
    },
    // 获取某场区场地列表
    getSpaceList(page) {
      const { spacePagination: pagination, activeCheckArea } = this
      if (page) {
        pagination.page = page
        this.spacePagination.page = page
      }
      spaceList({ pagination, param: { id: activeCheckArea.id }}).then(res => {
        if (res.errorCode !== '000000') return
        this.spaceListData = res.recordList
        this.spaceTotal = res.totalCount
      })
    },
    // 新增场地
    toAddSpace(area) {
      if (area) {
        this.activeCheckArea = area
      }
      this.spaceAddEdit = false
      this.getSpaceList(1)
      this.showAddSpace = true
    },
    // 编辑场地
    toEditSpace(space) {
      this.addSpaceForm = {
        ...space,
        pic: space.imgPath || '',
        showPic: space.imgAllPath || ''
      }
      this.showAddSpace = true
      this.spaceAddEdit = true
    },
    // 取消新增/编辑场地
    cancelAddEditSpace() {
      this.showAddSpace = false
      this.addSpaceForm = {}
    },
    // 确认新增/编辑场地
    confirmAddSpace() {
      const that = this
      const { addSpaceForm, activeCheckArea, spaceAddEdit } = this
      const param = {
        siteName: addSpaceForm.siteName,
        projectId: addSpaceForm.projectId,
        imgPath: addSpaceForm.pic
      }
      this.spaceSubLoading = true
      if (spaceAddEdit) {
        param.id = addSpaceForm.id
        param.sort = addSpaceForm.sort
        editSpace({ param }).then(res => {
          that.spaceSubLoading = false
          if (res.errorCode === '000000') {
            this.$message.success('编辑成功')
            this.toGetAreaList()
            this.getSpaceList(1)
            this.$refs.table.doLayout()
          }
        }, () => {
          that.spaceSubLoading = false
        })
      } else {
        param.areaId = activeCheckArea.id
        addSpace({ param }).then(res => {
          that.spaceSubLoading = false
          if (res.errorCode === '000000') {
            this.$message.success('新增成功')
            this.toGetAreaList()
            this.getSpaceList(1)
          }
        }, () => {
          that.spaceSubLoading = false
        })
      }
      this.showAddSpace = false
    },
    // 删除场地
    toDeleteSpace(id) {
      const that = this
      this.$confirm('此操作将删除该场地, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSpace({ param: { id }}).then(res => {
          if (res.errorCode === '000000') {
            that.$message.success('删除成功')
            that.toGetAreaList()
            that.getSpaceList(1)
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    getCenter(data) {
      this.$set(this.addAreaForm, 'positioning', data.address)
      this.$set(this.addAreaForm, 'lal', data.lnglat)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.tabs-cate{
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  height: 40px;
  margin-bottom: 20px;
  .item{
    margin-right: 60px;
    .text{
      display: flex;
      color: #333333;
      padding-bottom: 10px;
    }
  }
  .active{
    .text{
      color: $menuActive;
    }
    border-bottom: 3px solid $menuActive;
  }
}
.area-space-box {
  display: flex;
  position: relative;
  /* &::after {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 1px;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    background-color: #ccc;
  } */
  .add-area {
    position: absolute;
    top: 0;
    right: 30px;
  }
  .box-item {
    position: relative;
  }
  .box-item.area {
    flex: 2;
    padding-right: 30px;
    .header-wrap{
      display: flex;
      margin-bottom: 30px;
      .input-wrap{
        position: relative;
        flex: 1;
        margin-right: 20px;
        .el-input{
          ::v-deep input{
            padding-right: 40px;
          }
        }
        .icon{
          padding: 2px;
          cursor: pointer;
          position: absolute;
          width: 40px;
          right: 0px;
          top: 50%;
          transform: translate(0,-50%);
        }
      }
    }
  }
  .box-item.space {
    flex: 4;
    padding-left: 30px;
    border-left: 1px solid #e4e4e4;
    .space-header{
      display: flex;
      align-items: center;
      .title{
        color: #435EBE;
        margin-right: 20px;
      }
      .times{
        color: #333333;
        font-size: 12px;
        flex: 1;
        span{
          color: #435EBE;
        }
      }
    }
  }
  .area-item.active {
    box-shadow: 0 0 0 1px $menuActive;
    background-color: #F4F7FC;
  }
  .area-item {
    background-color: #F7F7F7;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
    cursor: pointer;
    .title-buttons {
      margin-bottom: 10px;
    }
    .title {
      font-size: 17px;
      font-weight: bold;
    }
    .area-info {
      .info-item {
        display: flex;
        padding-top: 10px;
        font-size: 14px;
        .el-icon-circle-check{
          color: #435EBE;
          margin-right: 2px;
        }
        .label {
          flex: none;
        }
        .value {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          color: $menuActive;
          font-weight: bold;
          .pro-name {
            margin-right: 5px;
            color: #435EBE;
            font-weight: 400;
          }
        }
      }
    }
  }
}
.upload-wrap{
  display: flex;
  align-items: center;
  .placeholader{
    flex: 1;
    div{
     line-height: 20px;
    }
  }
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}

.mapbox {
  width: 300px;
  height: 300px;
  margin-bottom: 20px;
  float: left;
}
</style>

<style lang="scss">
    .el-popover{
      padding: 0;
    }
    .el-pop-btns{
      cursor: pointer;
      .btn{
        height: 40px;
        display: flex;
        align-items: center;
        padding-left: 8px;
        &:hover{
          background-color: #edeff7;
        }
      }
    }
</style>
